<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view class="myView">
		<!-- 顶部时间选项卡 -->
		<view class="headerClass">
			<scroll-view class="scrollClass" scroll-x :scroll-into-view="scrollToView" scroll-with-animation="true">
				<view class="blockClass" :class="selectIndex == index ? 'dateselect': '' " v-for="(item,index) in dateArray" :key="index"
				 @click="dateClick(index,item)" v-model="selectIndex">
					<view class="textCLass jh_fs_26" :id="'view' + index">
						<view class="weekClass">{{item.week}}</view>
						<view class="dateClass">{{item.date}}</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 14%;height: 100%; align-items: center; justify-content: center;display: flex;">
				<image src="../static/order/calendar.png" class="calendarImage" @click="onShowDatePicker()"></image>
			</view>
		</view>
		<!-- 车票内容部分 -->
		<view class="ctky_View" v-for="(item,index) in shiftList" :key="index" @click="ticketDetail(item)">
			<view class="ctky_View_Left">
				<view style="display: flex;align-items: center;margin:20rpx 25rpx;">
					<view class="markType jh_fs_24" style="border:#1EA2FF solid 1px;color:#1EA2FF;">{{item.PlanCoachCardNumber}}</view>
					<view class="jh_fs_32" style="margin-left:19rpx ;font-family: SourceHanSansSC-Bold;font-weight: bold;">{{turnDate(item.SetoutTime)}}</view>
				</view>
				<view style="margin-left: 25rpx;display: flex;align-items: center;margin-bottom: 16rpx;">
					<image src="../static/titcket/startDot.png" style="width: 10rpx ;height: 10rpx;"></image>
					<view class="jh_fs_30" style="margin-left: 16rpx;font-style:SourceHanSansSC-Regular ;
					color: #333333;">{{item.StartSiteName}}</view>
				</view>
				<view style="margin-left: 25rpx;display: flex;align-items: center;margin-bottom: 16rpx;">
					<image src="../static/titcket/endDot.png" style="width: 10rpx ;height: 10rpx;"></image>
					<view class="jh_fs_30" style="margin-left: 16rpx;font-style:SourceHanSansSC-Regular ;
					color: #333333;">{{item.EndSiteName}}</view>
				</view>
				<view class="jh_fs_28" style="margin-left: 25rpx;margin-bottom: 20rpx;font-style: SourceHanSansSC-Light;font-weight: lighter;
				color: #666666;">{{item.CoachGradeName}}/约{{item.EstimatedTime}}分钟</view>
			</view>
			<view class="ctky_View_Right">
				<view>
					<view style="margin-right: 28rpx;font-size: 36rpx;font-style:
		           SourceHanSansSC-Regular; color: #FC4646;">￥{{item.FullPrice}}</view>
					<view style="margin-right: 28rpx;margin-top: 20rpx;font-size: 24rpx;font-style:
		           SourceHanSansSC-Light; color: #666666;">余{{item.FreeSeats}}张</view>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<uni-calendar ref="calendar" :insert="false" :start-date="'1997-01-01'" @confirm="confirm"></uni-calendar>
		<!-- 无内容显示 -->
		<u-empty :style="{height:Height}" text="无班次信息" mode="list" v-if="shiftList.length == 0"></u-empty>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize:'',
				date: '', //时间轴上选中的日期
				dateArray:[],//时间轴的数量的数组
				selectIndex:'',
				selectDate:'',
				scrollToView:'',
				Height:'',
				shiftList:[],
				stationInfo:[]
			}
		},
		onLoad(params) {
			_self = this;
			_self.fontSize = getApp().globalData.fontSize;
			_self.stationInfo = params;
			//初始化时间轴
			_self.loadDate();
			//将上一个页面传过来的日期设置为被选中状态
			_self.onSelected(params.selectDate);
			//获取系统信息
			uni.getSystemInfo({
				success: function(res) {
					_self.Height = res.windowHeight - 120 + 'px';
				}
			});
			_self.GetCoachInfoBySite(params.selectDate);
			console.log(_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode);
		},
		methods: {
//-----------------------------------接口专区开始-----------------------------------
			//----------------------------加载班次列表数据----------------------------
			GetCoachInfoBySite:function(date){
				uni.showLoading({
					title:'正在加载...'
				});
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetCoachInfoBySite.url,
					method:_self.$h.expressInterface.expressInterface.GetCoachInfoBySite.method,
					header:_self.$h.expressInterface.expressInterface.GetCoachInfoBySite.header,
					data: {
						appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
						StartSite:_self.stationInfo.startStation,
						EndSite:_self.stationInfo.endStation,
						ExecuteDate:date,
					},
					success: (res) => {
						console.log(res)
						uni.hideLoading();
						_self.shiftList = [];
						//非空判断
						if(res.data.Success) {
							_self.shiftList = JSON.parse(res.data.Data);
							console.log(_self.shiftList);
						}else {
							_self.shiftList = JSON.parse(res.data.Data);
							uni.showToast({
								title:'暂无班次信息',
								icon:'none'
							})
						}
					},
					fail(res) {
						uni.hideLoading();
					}
				});	
			},
//-----------------------------------接口专区结束-----------------------------------
			//-----------------------------------显示日历-----------------------------------
			onShowDatePicker:function(type){
				_self.$refs.calendar.open();
			},
			//---------------------------------日期确定---------------------------------
			confirm(params) {
				// console.log(params);
				// _self.selectDate = params.fulldate + ' ' + params.lunar.ncWeek;
				_self.onSelected(params.fulldate);
			},
			//-------------------------------时间转换-------------------------------
			turnDate(date) {
				var setTime = date.replace('T',' ');
				return setTime.substring(0,16);
			},
			//-----------------------------------点击时间选项卡的时间-----------------------------------
			dateClick:function(e, item){
				console.log(item);
				_self.selectIndex = e;
				_self.date = item.longDate;
				_self.getDeparture();
			},
			//-----------------------------------点击顶部时间，请求该时间的班次列表-----------------------------------
			getDeparture(){
				_self.GetCoachInfoBySite(_self.date);
			},
			//-----------------------------------跳转班次详情-----------------------------------
			ticketDetail:function(item){
				console.log('点击了班次详情');
				uni.navigateTo({
					url:'../Order/ConfirmOrder?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			
			
			//-----------------------------------选择日期-----------------------------------
			onSelected(calSelectDate) {
				_self.GetCoachInfoBySite(calSelectDate);
				if (calSelectDate) {
					var selectDate = calSelectDate.replace(/-/g,'/');
					//从日历选择时间后刷新列表数据
					// _self.getTicketInfo(e.value);
					var IsExist = false;
					for (var i = 0; i < _self.dateArray.length; i++) {
						if ((new Date(_self.dateArray[i].longDate)).getTime() == (new Date(selectDate)).getTime()) {
							IsExist = true;
							_self.selectIndex = i;
							_self.scrollToView = '';
							if(i <= 1){
								_self.scrollToView = 'view' + (i - 1);
							}else if(i >6){
								_self.scrollToView = 'view' + (i + 1);
							}else {
								_self.scrollToView = 'view' + i;
							}
						}
					}
					//判断时间轴上是否存在改日期，不存在则重新绘制
					if (!IsExist) {
						_self.dateArray = [];
						var dateToday = new Date(); //获取今天日期
						var date = new Date(selectDate); //选中的日期
						_self.selectIndex = 0;
						for (var i = 0; i < 8; i++) {
							var mydate = new Date(date.getTime() + 24 * i * 60 * 60 * 1000); //日期一天加一次
							var nowdate = _self.getTime(3, mydate); //获取该日期的缩写  月/日
							var week = _self.getTime(2, mydate); //获取该日期为周几
							var longdate = _self.getTime(0, mydate); //获取 年/月/日
							if (_self.getTime(0, mydate) == _self.getTime(0, dateToday)) {
								week = '今天';
							}
							_self.dateArray.push({
								week: week,
								date: nowdate,
								longDate: longdate,
							});
						}
					}
				}
			},
			//-----------------------------------初始化时间轴-----------------------------------
			loadDate() {
				var date = new Date();
				_self.selectIndex = 0;
				for (var i = 0; i < 8; i++) {
					var mydate = new Date(date.getTime() + 24 * i * 60 * 60 * 1000);
					var nowdate = _self.getTime(3, mydate);
					var week = _self.getTime(2, mydate);
					var longdate = _self.getTime(0, mydate);
					if (mydate.getTime() == date.getTime()) {
						week = '今天';
					}
					_self.dateArray.push({
						week: week,
						date: nowdate,
						longDate: longdate,
					});
				}
			},
			//日期时间转换函数   type 0 年月日 ，1 时分秒 ， 2 星期 ，3 月/日  4几月几日
			getTime: function(type, date1) {
				let date = new Date(date1.getTime()),
					currentDate,
					currentTime,
					sortDate,
					monthAndDay,
					seperator = "/", // 如果想要其他格式 只需 修改这里 
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					weex = date.getDay(),
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// month >= 1 && month <= 9 ? (month = "0" + month) : "";
				// day >= 0 && day <= 9 ? (day = "0" + day) : "";
				//当前 日期
				currentDate = year + seperator + month + seperator + day;
				//当前 时间
				currentTime = hour + ":" + minute + ":" + second;
				sortDate = month + "/" + day;
				monthAndDay= month + "月" + day+"日";
				// 输出格式 为 2018-8-27 14:45:33
				// console.log(currentDate +" "+ currentTime);
				if (type == 0) {
					return currentDate
				} else if (type == 1) {
					return currentTime;
				} else if (type == 2) {
					if (weex == 1) {
						return '周一'
					}
					if (weex == 2) {
						return '周二'
					}
					if (weex == 3) {
						return '周三'
					}
					if (weex == 4) {
						return '周四'
					}
					if (weex == 5) {
						return '周五'
					}
					if (weex == 6) {
						return '周六'
					}
					if (weex == 0) {
						return '周日'
					}
				} else if (type == 3) {
					return sortDate;
				}else if(type==4)
				{
					return monthAndDay;
				}
				 else {
					return currentDate + " " + currentTime;
				}
			},
		}
	}
</script>

<style lang="scss">
	page,
	.myView {
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #F1F1F1;
	}
	.headerClass {
		width: 100%;
		background: #FFFFFF;
		height: 109rpx;
		margin-bottom: 10rpx;
		display: flex;
	}
	.scrollClass {
		height: 109rpx;
		width: 86%;
		white-space: nowrap; //外层写这俩
		flex-wrap: nowrap;
	}
	.blockClass {
		margin: 12rpx 14rpx;
		//background: #FFFFFF;
		width: 87rpx;
		height: 84rpx;
		border-radius: 8rpx;
		display: inline-block; //里层写这个
	}
	.textCLass {
		margin: 9rpx 17rpx;
	}
	.weekClass {
		//display: block;
		// font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: #333333;
		text-align: center;
	}
	.calendarImage {
		width: 35rpx;
		height: 37rpx;
	}
	
	.dateClass {
		//display: block;
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: #333333;
		text-align: center;
	}
	.dateselect {
		background: #DD524D;
	
		.weekClass {
			color: #FFFFFF;
		}
	
		.dateClass {
			color: #FFFFFF;
		}
	}
	.ctky_View {
		width: 94%;
		background: #FFFFFF;
		margin: 16rpx 3%;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.ctky_View_Left {
		text-align: left;
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.ctky_View_Right {
		display: flex;
		text-align: right;
		align-items: center;
		padding: 0;
	}
	.markType {
		// width:65rpx;
		padding: 0 10rpx;
		height: 37rpx;
		line-height: 37rpx;
		border-radius: 14rpx;
		text-align: center;
		align-items: center;
		font-family: SourceHanSansSC-Light;
	}
</style>
